<ol class="breadcrumb" breadcrumb="">
    <li class="breadcrumb-item ng-scope active">
        <span>Insights</span>
    </li>
</ol>
<div class="container-fluid">
    <div class="animated fadeIn">
        <div class="row">
            <div class="col-sm-6 col-lg-4">
                <div class="card card-inverse text-white bg-success">
                    <div class="card-block">
                        <div class="row">
                            <div class="col-sm-8">
                                <h4 title="Average Active Users">{{avg_active_users}} avg</h4>
                                <p>Active Users</p>
                            </div>
                            <div class="col-sm-4">
                                <div class="float-right">
                                    <select id="chart_type" ng-change="updateData(option)" ng-model="option" class="form-control">
                                        <option selected>Daily</option>
                                        <option>Monthly</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chart-wrapper p-x-1" style="height:70px;">
                        <canvas id="chart-activeusers" class="chart chart-line" style="margin:10x" chart-data="activeusers_data" chart-labels="activeusers_labels"
                            chart-series="activeusers_series" chart-colors="colors" height="300" chart-options="activeusers_options"
                        />
                    </div>
                </div>
            </div>
            <!--/col-->
            <div class="col-sm-6 col-lg-4">
                <div class="card text-white bg-primary card-inverse">
                    <div class="card-block">
                        <h4 title="Average User Response Times">{{user_avg}} ms</h4>
                        <p>User Response Times</p>
                    </div>
                    <div class="chart-wrapper p-x-1" style="height:70px;">
                        <canvas id="chart-use_rsp_times" class="chart chart-line" style="margin:10x" chart-data="users_response_data" chart-labels="user_response_labels"
                            chart-series="user_response_series" chart-colors="colors" height="300" chart-options="activeusers_options"
                        />
                    </div>
                </div>
            </div>
            <!--/col-->
            <div class="col-sm-6 col-lg-4">
                <div class="card card-inverse text-white bg-warning">
                    <div class="card-block">
                        <h4 itle="NLU Response Times">{{nlu_avg}} ms</h4>
                        <p>NLU Response Times</p>
                    </div>
                    <div class="chart-wrapper" style="height:70px;">
                        <canvas id="chart-user_rsp_times" class="chart chart-line" style="margin:10x" chart-data="nlu_response_data" chart-labels="nlu_response_labels"
                            chart-series="nlu_response_series" chart-colors="colors" height="300" chart-options="activeusers_options"
                        />
                    </div>
                </div>
            </div>
            <!--/col-->
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <strong>Bot Insights</strong>
                    </div>
                    <div class="card-block">
                        <div class="form-group row">
                            <label for="select" class="col-sm-2 col-form-label">Bot</label>
                            <div class="col-sm-10">
                                <select id="bot_name" ng-change="drawCharts()" ng-options="bot.bot_id as bot.bot_name for bot in botList" ng-model="selectedBot" class="form-control">
                                </select>
                            </div>
                        </div><br><br>
                        <div class="row">
                                <div class="col-sm-6 col-lg-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <strong>Intents Classification</strong>
                                        </div>
                                        <div class="card-block">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <label for="fader">Confidence%: &nbsp;</label> {{confidencePercent}}
                                                    <input ng-init="confidencePercent=30" ng-model="confidencePercent" type="range" min="0" max="100" id="fader" style="width:100%" ng-change="updateBarChart()"
                                                    />
                                                </div>
                                            </div>
                                            <br>
                                            <br>
                                            <div class="chart-wrapper">
                                                <canvas id="confidence-barchart" class="chart chart-bar" chart-data="barchar_data" chart-labels="bar_chart_labels" chart-series="bar_chart_series"
                                                    chart-colors="colors" height="200px" chart-options="barchart_options"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-lg-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <strong>Intents Frequency</strong>
                                        </div>          
                                    <div class="card-block">
                                        <div class="chart-wrapper">
                                            <canvas id="chart_pie_intents_usage" class="chart chart-doughnut" chart-data="intents_pie_data" chart-labels="intents_pie_labels"
                                                chart-colors="colors" chart-options="piechart_options" height="244px" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       
</div>
